<template>
    <div class="apply-container">
        <!-- 顶部导航 -->
        <el-header class="header">
            <div class="header-content">
                <div class="left-section">
                    <div class="logo" @click="router.push('/user/home')">
                        <img src="@/assets/img/logo.png" alt="logo" class="logo-img"/>
                        <span class="company-name">亿星航梦科技招聘</span>
                    </div>
                </div>
            </div>
        </el-header>

        <div class="main-content">
            <!-- 添加错误状态显示
            <el-empty 
                v-if="!position.positionName"
                description="未找到职位信息"
            >
                <el-button type="primary" @click="router.push('/user/home')">
                    返回首页
                </el-button>
            </el-empty> -->

            <!-- 职位详情卡片 -->
            <el-card 
                
                class="position-detail" 
                v-loading="loading"
            >
                <template #header>
                    <div class="position-header">
                        <div class="position-title">
                            <h2>{{ position.positionName }}</h2>
                            <span class="salary">{{ position.salary }}</span>
                        </div>
                        <el-button type="primary" size="large" @click="showResumeForm">立即投递</el-button>
                    </div>
                </template>
                
                <div class="position-info">
                    <div class="info-item">
                        <el-icon><Office /></el-icon>
                        <span>部门：{{ position.departmentName }}</span>
                    </div>
                    <div class="info-item">
                        <el-icon><School /></el-icon>
                        <span>学历要求：{{ position.degreeRequirement }}</span>
                    </div>
                    <div class="info-item">
                        <el-icon><Timer /></el-icon>
                        <span>工作经验：{{ position.workExperience }}</span>
                    </div>
                    <div class="info-item">
                        <el-icon><Location /></el-icon>
                        <span>工作地点：成都</span>
                    </div>
                </div>

                <el-divider>
                    <el-icon><Document /></el-icon>
                    职位描述
                </el-divider>
                
                <div class="description-section">
                    <div class="description-content">{{ position.positionDescription }}</div>
                </div>

                <el-divider>
                    <el-icon><Connection /></el-icon>
                    任职要求
                </el-divider>
                
                <div class="requirements-section">
                    <div class="requirements-content">
                        1. {{ position.degreeRequirement }}及以上学历；<br>
                        2. {{ position.workExperience }}；<br>
                        3. 良好的沟通能力和团队协作精神；<br>
                        4. 有相关工作经验者优先。
                    </div>
                </div>
            </el-card>

            <!-- 投递简历抽屉 -->
            <el-drawer
                v-model="drawerVisible"
                title="投递简历"
                size="60%"
                :destroy-on-close="true"
            >
                <el-form 
                    ref="resumeFormRef"
                    :model="resumeForm"
                    :rules="resumeRules"
                    label-width="100px"
                >
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="resumeForm.name" placeholder="请输入姓名"/>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="resumeForm.email" placeholder="请输入邮箱"/>
                    </el-form-item>

                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="resumeForm.phone" placeholder="请输入手机号"/>
                    </el-form-item>

                    <el-form-item label="个人简介" prop="summary">
                        <el-input 
                            v-model="resumeForm.summary" 
                            type="textarea" 
                            rows="4"
                            placeholder="请简要介绍自己"
                        />
                    </el-form-item>

                    <el-form-item label="教育经历" prop="education">
                        <el-input 
                            v-model="resumeForm.education" 
                            type="textarea" 
                            rows="4"
                            placeholder="请填写教育经历"
                        />
                    </el-form-item>

                    <el-form-item label="工作经验" prop="experience">
                        <el-input 
                            v-model="resumeForm.experience" 
                            type="textarea" 
                            rows="4"
                            placeholder="请填写工作经验"
                        />
                    </el-form-item>

                    <el-form-item label="技能特长" prop="skills">
                        <el-input 
                            v-model="resumeForm.skills" 
                            type="textarea" 
                            rows="4"
                            placeholder="请填写技能特长"
                        />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submit" :loading="submitLoading">提交简历</el-button>
                        <el-button @click="drawerVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Office, School, Timer, Location, Document, Connection } from '@element-plus/icons-vue'
import { getPositionById } from '@/api/positions'
import { submitResume } from '@/api/user/user'

const route = useRoute()
const router = useRouter()
const loading = ref(true)
const position = ref([])
const drawerVisible = ref(false)
const submitLoading = ref(false)
const resumeFormRef = ref(null)

const resumeForm = ref({
    name: '',
    email: '',
    phone: '',
    summary: '',
    education: '',
    experience: '',
    skills: '',
    intention: '',  // 将保存职位名称
    userId: ''      // 将保存用户ID
})

const resumeRules = {
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    summary: [
        { required: true, message: '请填写个人简介', trigger: 'blur' }
    ],
    education: [
        { required: true, message: '请填写教育经历', trigger: 'blur' }
    ],
    experience: [
        { required: true, message: '请填写工作经验', trigger: 'blur' }
    ],
    skills: [
        { required: true, message: '请填写技能特长', trigger: 'blur' }
    ]
}

// 加载职位详情
const loadPosition = async () => {
    try {
        const positionId = route.params.positionId
        console.log(positionId)
        if (!positionId) {
            ElMessage.error('职位ID不存在')
            return
        }
        
        const res = await getPositionById(positionId)
        console.log('职位详情：', res)  // 添加详细日志
        
        if (res.code === 200 && res.data) {
            position.value = res.data
        } else {
            ElMessage.error(res.message || '获取职位信息失败')
        }
    } catch (error) {
        console.error('获取职位信息失败：', error)
        ElMessage.error('获取职位信息失败')
    } finally {
        loading.value = false
    }
}

// 显示简历表单
const showResumeForm = () => {
    const userInfo = localStorage.getItem('userInfo')
    if (!userInfo) {
        ElMessage.warning('请先登录')
        router.push('/user/login')
        return
    }
    resumeForm.value.intention = position.value.positionName
    resumeForm.value.userId = JSON.parse(userInfo).user.userId
    drawerVisible.value = true
}

// 提交简历
const submit = async () => {
    if (!resumeFormRef.value) return
    
    await resumeFormRef.value.validate(async (valid) => {
        if (valid) {
            try {
                submitLoading.value = true
                const res = await submitResume(resumeForm.value)
                
                if (res.code === 200) {
                    ElMessage.success('简历投递成功')
                    drawerVisible.value = false
                } else {
                    ElMessage.error(res.message || '投递失败')
                }
            } catch (error) {
                console.error('投递失败：', error)
                ElMessage.error('投递失败：' + error.message)
            } finally {
                submitLoading.value = false
            }
        } else {
            return false
        }
    })
}

onMounted(() => {
    loadPosition()
})
</script>

<style scoped>
.apply-container {
    min-height: 100vh;
    background-color: #f5f7fa;
}

.header {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    height: 60px;
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.logo-img {
    height: 36px;
}

.company-name {
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(45deg, #409eff, #36d1dc);
    -webkit-background-clip: text;
    color: transparent;
}

.main-content {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

.position-detail {
    margin-bottom: 20px;
}

.position-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.position-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.position-title h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
}

.salary {
    font-size: 20px;
    color: #f56c6c;
    font-weight: bold;
}

.position-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #606266;
}

.description-section,
.requirements-section {
    padding: 20px;
    line-height: 1.8;
    color: #606266;
}

:deep(.el-drawer__body) {
    padding: 20px;
}

:deep(.el-form-item__label) {
    font-weight: bold;
}
</style>